<template>
  <transition name="fade">
    <el-scrollbar
      v-if="currentSong?.lyric"
      height="100%"
      class="bg-#fff rounded-16px overflow-hidden mr-20px"
    >
      <div class="w-444px mb-[0!important] h-full !overflow-auto p-16px pt12px">
        <!-- <el-image
        class="w-120px h-120px rounded"
        v-if="currentSong.imageUrl"
        :src="currentSong.imageUrl"
      /> -->
        <div class="text-18px text-#363636"
          >{{ currentSong.title }}歌词<span class="text-[#BFBFBF] text-16px pl-12px">
            {{ formatDate(currentSong.createTime) }}
          </span></div
        >
        <!-- <div class="text-14px mt-4px mb-4px">歌词</div> -->
        <!-- <div class="text-[var(--el-text-color-secondary)] text-12px line-clamp-1">
        {{ currentSong.desc }}
      </div> -->
        <!-- <div class="text-[#BFBFBF] text-16px">
        {{ formatDate(currentSong.createTime) }}
      </div> -->
        <!-- <el-button size="small" round class="my-6px">信息复用</el-button> -->
        <div class="flex justify-center">
          <div
            class="text-[#9C9C9C] text-16px whitespace-pre-line line-height-30px pt-55px"
            v-html="currentSong.lyric"
          ></div>
        </div>
      </div>
    </el-scrollbar>
  </transition>
</template>

<script lang="ts" setup>
import { formatDate } from '@/utils/formatTime'
defineOptions({ name: 'Index' })

const currentSong: any = inject('currentSong', {})
</script>

<style scoped>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

:deep() {
  .el-card__body {
    padding: 16px !important;
  }
}
</style>
